<template>
  <el-dialog title="添加用户" :close-on-click-modal="false" :visible.sync="showAddUserDialog">
    <el-form ref="addUserForm" :rules="rules" :model="addUserForm" label-width="80px">
        <el-form-item label="用户名" prop="name">
            <el-input v-model="addUserForm.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="addUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
            <el-input v-model="addUserForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
            <!-- props可以设置数据的lable和value为自定义属性 -->
           <el-cascader
            style="width: 100%;"
            :props="{value: 'id', label: 'name'}"
            v-model="addUserForm.department"
            :options="depts"></el-cascader>
        </el-form-item>
        <el-form-item label="角色" prop="roles">
            <el-select v-model="addUserForm.roles" style="width: 100%;" multiple>
              <el-option
                v-for="item in roles"
                :key="item.id"
                :label="item.remark"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="showAddUserDialog = false">取 消</el-button>
        <el-button type="primary" :loading="sureBtnLoading" @click="sureSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import http from '@/utils/request'
export default {
    props: ['depts', 'roles'],
    data() {
        return {
            sureBtnLoading: false,
            showAddUserDialog: false,
            addUserForm: {
                name: '',
                email: '',
                mobile: '',
                department: '',
                roles: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱名称', trigger: 'blur' },
                    // \w -> a-zA-Z0-9_ 
                    // { pattern: /^\w[-\w]{2,}@[a-zA-Z0-9]{2,}\.[a-zA-Z]{2,}$/, message: '请输入正确邮箱', trigger: 'blur'}
                ],
                mobile: [
                    { required: true, message: '请输入电话', trigger: 'blur' },
                    // { pattern: /^1\d{10}$/, message: '请输入正确的电话', trigger: 'blur'}
                ],
                department: [
                    { required: true, message: '请选择部门', trigger: 'blur' },
                ],
                roles: [
                    { required: true, message: '请选择角色', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        sureSubmit() {
           this.$refs.addUserForm.validate(valid => {
               if(valid) {
                   this.sureBtnLoading = true
                   let deppartment = this.addUserForm.department[this.addUserForm.department.length - 1]
                   http.post('/sys-user', {
                       ...this.addUserForm, 
                       department: deppartment
                   }).then(() => {
                        this.sureBtnLoading = false
                        this.showAddUserDialog = false
                        this.$message({
                          message: '数据添加成功',
                            type: 'success'
                        });
                        this.$refs.addUserForm.resetFields()
                        this.$emit('refresh')
                   })
               }
           })
        }
    }
}
</script>

<style>

</style>